<template>
  <view class="CRM">
    <view class="search">
      <view class="search-left">
        <uni-icons type="search" size="16" color="#b7c5dd"></uni-icons>
        <input placeholder="请输入关键词" v-model="keyword" confirm-type="search" @confirm="onRefresh"></input>
      </view>
      <button class="search-bot" @tap="onRefresh">搜索</button>
    </view>
    <view class="hr"></view>
    <scroll-view class="scroll-y" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" refresher-background="" refresher-background="#f2f2f2" @refresherrefresh="onRefresh" @scrolltolower="scrolltolower" :lower-threshold="50">
      <uni-list>
        <template v-for="(item,index) in list">
          <uni-list-item :key="index" clickable :title="item.customerName" :note="item.customerPhone" :thumb="item.customerSex==1?'/static/CRM/boy.png':'/static/CRM/girl.png'" thumb-size="lg" @click="back(item)"></uni-list-item>
        </template>
      </uni-list>
      <view class="more">
        <uni-load-more v-if="list.length<total" status="loading" :contentText="{contentrefresh: ' 正在努力加载中...'}"></uni-load-more>
      </view>
    </scroll-view>
  </view>
</template>

<script>
let formDate = {
  page: 1,
  pageSize: 15,
}
export default {
  data() {
    return {
      keyword: '',
      triggered: false,
      loading: false,
      list: [],
      total: 0,
    }
  },
  onLoad() {
    this.onRefresh()
  },
  methods: {
    back(row) {
      uni.setStorage({
        key: 'user_key',
        data: row,
        success: function () {
          uni.navigateBack({
            delta: 1
          });
        }
      });
    },
    getDatas() {
      const _this = this
      _this.$post('/sale/wx/customer/get_datas', { ...formDate, customerName: _this.keyword }, false).then(res => {
        if (res.code * 1 === 200) {
          if (formDate.page === 1) {
            _this.list = res.data.row
          } else {
            _this.list = [..._this.list, ...res.data.row]
          }
          _this.total = res.data.total
          if (_this.list.length === _this.total) {
            _this.loading = true
          } else {
            _this.loading = false
          }
          _this.triggered = false;
        } else {
          formDate.page--
        }
      }).catch(() => {
        _this.triggered = false;
        _this.loading = false
      })
    },
    /**自定义下拉刷新被触发*/
    onRefresh() {
      let _this = this
      _this.triggered = true;
      formDate.page = 1
      _this.getDatas()
    },
    scrolltolower() {
      let _this = this
      if (_this.loading) return;
      _this.loading = true
      formDate.page++
      _this.getDatas()
    },
  }
}
</script>

<style lang="scss" scope>
.CRM {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f2f2f2;
}
.search {
  background: #fff;
  padding: 10px 3vw;
  display: flex;
  align-items: center;
  &-left {
    display: flex;
    align-items: center;
    background: #f2f2f2;
    border-radius: 18px;
    height: 36px;
    flex: 1;
    padding: 0 10px;
    input {
      width: 100%;
      height: 100%;
      padding-left: 10px;
      font-weight: bold;
    }
  }
  &-bot {
    margin-left: 10px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    color: #fff;
    width: 60px;
    border: 0;
    background: #ed7467;
  }
}
.scroll-y {
  flex: 1;
  height: 0;
}
.hr {
  height: 10px;
  width: 100%;
}
</style>
